import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Plus, Search, MoreHorizontal, Edit, Trash2, Eye, Package } from "lucide-react";

export default function ProductsPage() {
  const products = [
    {
      id: 1,
      name: "iPhone 15 Pro",
      category: "手机",
      price: "¥8,999",
      stock: 45,
      status: "在售",
      sales: 156,
      image: "https://via.placeholder.com/50",
    },
    {
      id: 2,
      name: "MacBook Air M2",
      category: "电脑",
      price: "¥9,999",
      stock: 23,
      status: "在售",
      sales: 89,
      image: "https://via.placeholder.com/50",
    },
    {
      id: 3,
      name: "AirPods Pro",
      category: "耳机",
      price: "¥1,899",
      stock: 67,
      status: "在售",
      sales: 234,
      image: "https://via.placeholder.com/50",
    },
    {
      id: 4,
      name: "iPad Air",
      category: "平板",
      price: "¥4,799",
      stock: 12,
      status: "缺货",
      sales: 78,
      image: "https://via.placeholder.com/50",
    },
    {
      id: 5,
      name: "Apple Watch Series 9",
      category: "智能手表",
      price: "¥3,199",
      stock: 34,
      status: "在售",
      sales: 123,
      image: "https://via.placeholder.com/50",
    },
  ];

  const getStatusBadge = (status: string) => {
    if (status === "在售") {
      return <Badge className="bg-green-100 text-green-800">在售</Badge>;
    }
    return <Badge className="bg-red-100 text-red-800">缺货</Badge>;
  };

  const getStockBadge = (stock: number) => {
    if (stock > 50) {
      return <Badge className="bg-green-100 text-green-800">充足</Badge>;
    } else if (stock > 20) {
      return <Badge className="bg-yellow-100 text-yellow-800">一般</Badge>;
    } else {
      return <Badge className="bg-red-100 text-red-800">紧张</Badge>;
    }
  };

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">产品管理</h1>
          <p className="text-muted-foreground">管理系统中的所有产品信息</p>
        </div>
        <Button>
          <Plus className="mr-2 h-4 w-4" />
          添加产品
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid gap-6 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">总产品数</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">567</div>
            <p className="text-xs text-muted-foreground">+5% 相比上月</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">在售产品</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">523</div>
            <p className="text-xs text-muted-foreground">+8% 相比上月</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">本月销量</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">1,234</div>
            <p className="text-xs text-muted-foreground">+15% 相比上月</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">总收入</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">¥123,456</div>
            <p className="text-xs text-muted-foreground">+12% 相比上月</p>
          </CardContent>
        </Card>
      </div>

      {/* 产品列表 */}
      <Card>
        <CardHeader>
          <CardTitle>产品列表</CardTitle>
          <CardDescription>所有产品的详细信息</CardDescription>
          <div className="flex items-center space-x-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input placeholder="搜索产品..." className="pl-10 w-80" />
            </div>
            <Select>
              <SelectTrigger className="w-32">
                <SelectValue placeholder="分类" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部分类</SelectItem>
                <SelectItem value="phone">手机</SelectItem>
                <SelectItem value="computer">电脑</SelectItem>
                <SelectItem value="headphone">耳机</SelectItem>
                <SelectItem value="tablet">平板</SelectItem>
                <SelectItem value="watch">智能手表</SelectItem>
              </SelectContent>
            </Select>
            <Select>
              <SelectTrigger className="w-32">
                <SelectValue placeholder="状态" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部状态</SelectItem>
                <SelectItem value="onsale">在售</SelectItem>
                <SelectItem value="outofstock">缺货</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>产品</TableHead>
                <TableHead>分类</TableHead>
                <TableHead>价格</TableHead>
                <TableHead>库存</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>销量</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {products.map((product) => (
                <TableRow key={product.id}>
                  <TableCell>
                    <div className="flex items-center space-x-3">
                      <img
                        src={product.image}
                        alt={product.name}
                        className="h-10 w-10 rounded object-cover"
                      />
                      <div>
                        <div className="font-medium">{product.name}</div>
                        <div className="text-sm text-muted-foreground">ID: {product.id}</div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">{product.category}</Badge>
                  </TableCell>
                  <TableCell className="font-medium">{product.price}</TableCell>
                  <TableCell>
                    <div className="flex items-center space-x-2">
                      <span>{product.stock}</span>
                      {getStockBadge(product.stock)}
                    </div>
                  </TableCell>
                  <TableCell>{getStatusBadge(product.status)}</TableCell>
                  <TableCell>{product.sales}</TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="h-8 w-8 p-0">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>
                          <Eye className="mr-2 h-4 w-4" />
                          查看详情
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <Edit className="mr-2 h-4 w-4" />
                          编辑
                        </DropdownMenuItem>
                        <DropdownMenuItem className="text-red-600">
                          <Trash2 className="mr-2 h-4 w-4" />
                          删除
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
} 